<template>
	<view>
		<view class="searchPicker">
			<view class="searchPicker-value" @click="handleOpen">
				{{ selectName }}
			</view>
			<up-icon name="arrow-down" size="18" color="#666" @click="handleOpen"></up-icon>
		</view>
		<up-popup :show="dialogShow" :closeable="false" >
			<view class="dialog-title">
				<u-search shape="square" placeholder="请输入名称进行搜索" :showAction="false" v-model="inputSearch" :clearabled="true" @change="inputChange" height="38"></u-search>
				<!-- <up-input
				       v-model="inputSearch"
					    placeholder="请输入名称进行搜索"
					    prefixIcon="search"
					    prefixIconStyle="font-size: 22px;color: #999"
						clearable
						@change="inputChange"
					></up-input> -->
					<view class="dialog-title-cancel ml-20" @click="onCancel">取消</view>
			</view>
				<scroll-view scroll-y="true" class="dialogMain">
					<view v-for="(item,index) in selectList" :key="index" class="dialog-scroll-item" :class="{'active':selectedKey===item.id}"  @click="onSelectItem(item,index)">
						{{item[keyName]}}
					</view>
				</scroll-view>
		</up-popup>
	</view>
</template>
<script>
	export default {
		name:'searchPicker',
		props: {
			selectInfo: {
				type: Object,
				default: ()=>{}
			},
			columns: {
				type: Array,
				default: () => []
			},
			keyName:{
				type:String,
				default:'name'
			}
		},
		emits: ['onSelect'],
		data() {
			return {
				selectName:"请选择",
				dialogShow: false,
				selectedKey: '',//选中id
				selectList: [],
				copySelectList:[],//复制数据
				inputSearch:''
			}
		},
		watch:{
			columns(newVal){
				this.selectList=newVal;
				this.copySelectList=newVal;
			},
			selectInfo(info){
				
				const { name='',id='',checkStatus='' }=info;
				this.selectName=name;
				this.selectedKey=id;
			}
		},
		mounted() {
			this.initData()
		},
		methods: {
			initData(){
				this.copySelectList=this.columns;
				this.selectName=this.selectInfo[this.keyName];
				this.selectedKey=this.selectInfo.id;
			},
			/**打开下拉弹框**/
			handleOpen() {
				this.dialogShow = true;
				this.inputSearch="";
				this.selectList=this.columns;
			},
			inputChange(keyword){
				const result=this.copySelectList.filter(item=>item[this.keyName].includes(keyword));
				this.selectList=result;
			},
			onSelectItem(item,index) {
				this.selectedKey = item.id;
				this.$emit('onSelect',item);
				this.dialogShow=false;
			},
			/**取消**/
			onCancel() {
				this.dialogShow = false;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.searchPicker {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		width: 100%;

		&-value {
			min-height: 42rpx;
			flex: 1;
			margin-right: 15rpx;
			max-width: 100%;
			// overflow: hidden;
			// text-overflow: ellipsis;
			// white-space: nowrap;
		}
	}
	.dialog-title {
		padding:30rpx 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		&-cancel {
			color:#666;
		}
	}
	.dialogMain {
		max-height: 50vh;
		height: 50vh;
		padding:0 20rpx;
		box-sizing: border-box;
		
		.dialog-scroll-item {
			// height: 68rpx;
			// line-height: 68rpx;
			padding:10rpx;
			font-size:30rpx;
			text-align: center;
			&.active {
				color:#246eff;
				font-weight: bold;
			}
		}
	}
</style>